<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
body,
h2,
ul {
    margin: 0;
    padding: 0;
}
li {
    list-style: none;
}
img {
    boder: none;
    vertical-align: top;
}
a {
    text-decoration: none;
    color: #333;
}
.box {
    width: 300px;
    height: 500px;
    padding: 0 10px;
    background: #45dfff;
}
.header {
    height: 46px;
    border-bottom: 1px solid #68b4ff;
}
.header h2 {
    float: left;
    font-size: 16px;
    line-height: 30px;
    padding-left: 20px;
}
#headNav {
    float: right;
    margin-top: 18px;
    cursor:pointer;
}
#headNav li {
    float: left;
    height: 20px;
    line-height: 20px;
    font-size: 12px;
    padding: 4px;
    border: 1px solid #68b4ff;
    border-bottom: none;
    margin-left: -1px;
}
#container {
}
#container ul {
    display: none;
}
ul#daily{display:block;}
#container li {
    border-bottom: 1px dashed #fff;
    font-size: 12px;
    padding: 8px;
    position: relative;
    padding-left: 40px;
}
.number {
    display: block;
    width: 20px;
    height: 14px;
    line-height: 14px;
    text-align: center;
    background: #03f;
    color: #fff;
    position: absolute;
    left: 10px;
    top: 10px;
}
.msg {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.show {
    display: block;
}
.show img {
    padding: 2px;
    border: 1px solid #000;
}
.detail {
    display: block;
    position: absolute;
    top: 8px;
    left: 140px;
}
.play {
    display: block;
    width: 30px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    background: blue;
    position: absolute;
    right: 30px;
    bottom: 10px;
    color: #fff;
}
.active {
    background: #fff;
}
</style>
<script>
window.onload = function (){
  
	var oMon = $('monthly');
    var aLi2 = $('monthly','li');
	var oAll = $('all');
    var aLi3 = $('all','li');
    var arr1 = [
        '解密1：关于地球与人类的一千零一问',
        '解密2：关于地球与人类的一千零一问',
        '解密3：关于地球与人类的一千零一问',
        '解密4：关于地球与人类的一千零一问',
        '解密5：关于地球与人类的一千零一问',
        '解密6：关于地球与人类的一千零一问',
        '解密7：关于地球与人类的一千零一问',
        '解密8：关于地球与人类的一千零一问',
        '解密9：关于地球与人类的一千零一问',
        '解密10：关于地球与人类的一千零一问'
    ];
    var arr2 = [1,2,3,4,5,6,7,8,9,10]
    var num = 0;

    var aHli = $('headNav','li');
    var aUl = $ ('container','ul');
    for (var i=0;i<aHli.length;i++){
        aHli[i].index = i;
        aHli[i].onclick = function(){
            for (var i=0;i<aHli.length;i++){
                aHli[i].className = '';
                aUl[i].style.display ='none';
            }
            this.className = 'active';
            aUl[this.index].style.display = 'block';
        }
    }

    tabFn('monthly');
	tabFn('all');
    tabFn('daily');

    function tabFn(id){
        //初始化
        var oUl  = $(id);
        for (var i = 0; i < arr2.length; i++) {
            oUl.innerHTML += '<li></li>'
        };
        var aLi = $(id,'li');
        fn(num);

        function fn(a){
            for (var i = 1; i < aLi.length; i++) {
                aLi[i].style.backgroundColor = "#45dfff";
                aLi[i].innerHTML = '<span class="number">'+ arr2[i] +'</span>'+
                '<span class="msg">'+ arr1[i] +'</span>';
            };
            aLi[a].style.backgroundColor = '#fff';
            aLi[a].innerHTML = '<span class="number">'+arr2[a]+'</span>' + 
              '<a class="show" href="#">'+
              '<img src="pen1.png" alt="">'+
              '<span class="detail">'+ arr1[a] +'</span>'+
              '<span class="play">播放</span>' + '</a>';
        }
        //滑动效果
        for (var i = 0; i < aLi.length; i++) {
            aLi[i].index = i;       //不要再写事件里边了
            aLi[i].onmouseover = function (){
                aLi[num].style.backgroundColor = "#45dfff";
                aLi[num].innerHTML = '<span class="number">'+ arr2[num] +'</span>'+ //每个第一行一开始不一样的，是不能同化的
                '<span class="msg">'+ arr1[num] +'</span>';

                fn(this.index);
            }
        };
    }   
}   
function $(id,tag){
    if(tag){
      return document.getElementById(id).getElementsByTagName(tag);
    }else{
      return document.getElementById(id);
    }
}
</script>
</head>
<body>
<div class="box">
  <div class="header">
    <h2>观看排行榜</h2>
    <ul id="headNav">
      <li class="active">每日</li>
      <li>每周</li>
      <li>全部</li>
    </ul>
  </div>
  <div id="container">
    <ul id="daily"></ul>
    <ul id="monthly"></ul>
    <ul id="all"></ul>
  </div>
</div>
</body>
</html>
